<script setup lang="ts">
import {reactive, ref, toRaw} from 'vue'
import { useRouter } from 'vue-router'
import LoginBg from '~/assets/images/login-bg.png'
import {FormRules} from "element-plus";
import { useLocalStorage } from '@vueuse/core'

const checked = ref(false)
const router = useRouter()

const ruleForm = reactive({
  name: 'admin', // 营业执照
  password: 'admin', // 授权书
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
})

const handleLogin = () => {
  const obj = toRaw(ruleForm);
  const store = useLocalStorage('gov-demo-userInfo');
  store.value = JSON.stringify(obj);
  router.push('/')
}

</script>

<template>
  <div class="login-view flex justify-evenly items-center h-full flex-col md:flex-row">
    <div class="hero flex-1 max-w-xl hidden md:block">
      <el-image :src="LoginBg" fit="fill" />
    </div>
    <div class="login-wrapper w-[80%] max-w-xl min-w-[30%]">
      <el-card shadow="never" class="w-full max-w-md" :body-style="{ padding: 20 }">
        <div class="mx-8 text-center">
          <div class="text-xl	font-bold	mb-5">账户登录</div>
          <el-text tag="p" class="text-[#868e96]">
            还没有账号？
            <el-link type="primary" @click="router.push('/register')">注册</el-link>
          </el-text>
        </div>
        <el-form label-position="top" :model="ruleForm" :rules="rules">
          <el-form-item label="用户名">
            <el-input size="large" v-model="ruleForm.name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input size="large" v-model="ruleForm.password" placeholder="请输入密码" />
          </el-form-item>
          <div class="flex justify-between mb-2">
            <el-checkbox v-model="checked" label="记住我" size="large" />
            <el-link type="primary">忘记密码?</el-link>
          </div>
          <el-button type="primary" size="large" class="w-full" @click="handleLogin">登录</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
